import { useState } from 'react';

import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';

import { _videoTutorials } from 'src/_mock';
import { DashboardContent } from 'src/layouts/dashboard';

import { VideoDialog } from '../video-dialog';
import { VideoTutorialCard } from '../video-tutorial-card';

// ----------------------------------------------------------------------

/**
 * チュートリアル動画ビュー：ビデオチュートリアルの表示
 */
export function OverviewAnalyticsView() {
  const [openDialog, setOpenDialog] = useState(false);
  const [selectedVideo, setSelectedVideo] = useState<{
    title: string;
    videoUrl: string;
  } | null>(null);

  const handleOpenVideo = (title: string, videoUrl: string) => {
    setSelectedVideo({ title, videoUrl });
    setOpenDialog(true);
  };

  const handleCloseDialog = () => {
    setOpenDialog(false);
    // ダイアログが閉じるアニメーション後にビデオをクリア
    setTimeout(() => setSelectedVideo(null), 300);
  };

  return (
    <DashboardContent maxWidth="xl">
      {/* ヘッダー */}
      <Box sx={{ mb: 5 }}>
        <Typography variant="h4" sx={{ mb: 3, fontWeight: 700 }}>
          チュートリアル
        </Typography>

        {/* 説明カード */}
        <Box
          sx={{
            p: 3,
            borderRadius: 2,
            bgcolor: 'background.neutral',
            border: '1px solid',
            borderColor: 'divider',
          }}
        >
          <Typography
            variant="body1"
            sx={{
              mb: 2.5,
              color: 'text.primary',
              fontWeight: 500,
            }}
          >
            各チュートリアルのサムネイルをクリックすることで、詳細な操作方法や解説動画をご覧いただけます。
          </Typography>

          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
            {/* インタラクティブ学習 */}
            <Box
              sx={{
                display: 'flex',
                alignItems: 'flex-start',
                gap: 1.5,
                flex: '1 1 280px',
                minWidth: 0,
              }}
            >
              <Box
                sx={{
                  width: 24,
                  height: 24,
                  borderRadius: '8px',
                  bgcolor: 'primary.main',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                  boxShadow: (theme) => `0 2px 8px ${theme.palette.primary.main}40`,
                }}
              >
                <Box
                  sx={{
                    width: 10,
                    height: 10,
                    borderRadius: '2px',
                    bgcolor: 'white',
                  }}
                />
              </Box>
              <Box>
                <Typography
                  variant="subtitle2"
                  sx={{
                    color: 'primary.main',
                    fontWeight: 700,
                    mb: 0.5,
                  }}
                >
                  インタラクティブ学習
                </Typography>
                <Typography
                  variant="caption"
                  sx={{
                    color: 'text.secondary',
                    lineHeight: 1.6,
                  }}
                >
                  実際に操作しながら学べるステップバイステップガイド
                </Typography>
              </Box>
            </Box>

            {/* 動画解説 */}
            <Box
              sx={{
                display: 'flex',
                alignItems: 'flex-start',
                gap: 1.5,
                flex: '1 1 280px',
                minWidth: 0,
              }}
            >
              <Box
                sx={{
                  width: 24,
                  height: 24,
                  borderRadius: '8px',
                  bgcolor: 'info.main',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                  boxShadow: (theme) => `0 2px 8px ${theme.palette.info.main}40`,
                }}
              >
                <Box
                  sx={{
                    width: 0,
                    height: 0,
                    borderLeft: '6px solid white',
                    borderTop: '4px solid transparent',
                    borderBottom: '4px solid transparent',
                    ml: 0.5,
                  }}
                />
              </Box>
              <Box>
                <Typography
                  variant="subtitle2"
                  sx={{
                    color: 'info.main',
                    fontWeight: 700,
                    mb: 0.5,
                  }}
                >
                  動画解説
                </Typography>
                <Typography
                  variant="caption"
                  sx={{
                    color: 'text.secondary',
                    lineHeight: 1.6,
                  }}
                >
                  全体の流れを一度に確認できる包括的なビデオチュートリアル
                </Typography>
              </Box>
            </Box>
          </Box>
        </Box>
      </Box>

      {/* 機能紹介動画 */}
      <Box sx={{ mb: 6 }}>
        <Box
          sx={{
            mb: 3,
            pb: 2,
            borderBottom: '2px solid',
            borderColor: 'primary.main',
            bgcolor: 'primary.lighter',
            px: 2,
            py: 1,
            borderRadius: 1,
          }}
        >
          <Typography variant="h5" sx={{ color: 'primary.darker', fontWeight: 700 }}>
            機能紹介動画
          </Typography>
        </Box>
        <Grid container spacing={3}>
          {_videoTutorials.feature.map((video) => (
            <Grid key={video.id} size={{ xs: 12, sm: 6, md: 4 }}>
              <VideoTutorialCard
                title={video.title}
                thumbnail={video.thumbnail}
                videoUrl={video.videoUrl}
                onPlay={() => handleOpenVideo(video.title, video.videoUrl)}
              />
            </Grid>
          ))}
        </Grid>
      </Box>

      {/* 初期設定 */}
      <Box sx={{ mb: 6 }}>
        <Box
          sx={{
            mb: 3,
            pb: 2,
            borderBottom: '2px solid',
            borderColor: 'primary.main',
            bgcolor: 'primary.lighter',
            px: 2,
            py: 1,
            borderRadius: 1,
          }}
        >
          <Typography variant="h5" sx={{ color: 'primary.darker', fontWeight: 700 }}>
            初期設定
          </Typography>
        </Box>
        <Grid container spacing={3}>
          {_videoTutorials.setup.map((video) => (
            <Grid key={video.id} size={{ xs: 12, sm: 6, md: 4 }}>
              <VideoTutorialCard
                title={video.title}
                thumbnail={video.thumbnail}
                videoUrl={video.videoUrl}
                onPlay={() => handleOpenVideo(video.title, video.videoUrl)}
              />
            </Grid>
          ))}
        </Grid>
      </Box>

      {/* 紹介機能 */}
      <Box sx={{ mb: 6 }}>
        <Box
          sx={{
            mb: 3,
            pb: 2,
            borderBottom: '2px solid',
            borderColor: 'primary.main',
            bgcolor: 'primary.lighter',
            px: 2,
            py: 1,
            borderRadius: 1,
          }}
        >
          <Typography variant="h5" sx={{ color: 'primary.darker', fontWeight: 700 }}>
            紹介機能
          </Typography>
        </Box>
        <Grid container spacing={3}>
          {_videoTutorials.introduction.map((video) => (
            <Grid key={video.id} size={{ xs: 12, sm: 6, md: 4 }}>
              <VideoTutorialCard
                title={video.title}
                thumbnail={video.thumbnail}
                videoUrl={video.videoUrl}
                onPlay={() => handleOpenVideo(video.title, video.videoUrl)}
              />
            </Grid>
          ))}
        </Grid>
      </Box>

      {/* ビデオダイアログ */}
      {selectedVideo && (
        <VideoDialog
          open={openDialog}
          title={selectedVideo.title}
          videoUrl={selectedVideo.videoUrl}
          onClose={handleCloseDialog}
        />
      )}
    </DashboardContent>
  );
}

